<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
      <!-- 
        自定义指令总结：
        一、定义语法：
        (1).局部指令：
        new Vue({new Vue({
        directives：{指令名：配置对象}或directives{指令名：回调函数】
        ))
        (2).全局指令：
        Vue.directive（指令名，配置对象）或Vue.directive（指令名，回调函数）
        二 配置对象中常用的3个回调：
        （1）.bind：指令与元素成功绑定时调用。
        （2）.inserted：指令所在元素被插入页面时调用。
        （3）.update：指令所在模板结构被重新解析时调用。
        三、备注：
        1.指令定义时不加v-，但使用时要加v-
        2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelcase命名。  
      -->
       <div id="root">
            <div>
                <span v-big="n"></span>
            </div>
            <div>n:{{n}}</div>
            <button @click="n++">n++</button>
            <hr/>
            <input type="text" v-bind:value="n">
            <hr/>
            <input type="text" v-fbind:value="n">

        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            // 全局的写法
            Vue.directive('bigggg',function(e,b){
                console.log('111')
            })
            new Vue({
                el: '#root', 
                data(){
                    return {
                        n:1
                    }
                },
                directives:{
                    //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
                    //简写方法就相当于bind和update.相当于钩子
                    big(element,binding){
                        console.log(this) //注意:此处的this是window,不是vm实例.directives都是这样
                        element.innerText =binding.value*10
                    },
                    fbind:{
                        //指令与元素成功绑定时（一上来）
                        bind(element,binding){
                            element.value=binding.value
                        },
                        //指令所在元素被插入页面时
                        inserted(element,binding){
                            element.focus()
                        },
                        //指令所在的模板被重新解析时
                        update(element,binding){
                            element.value=binding.value
                        },
                    }
                }
            })
        </script>
    </body>
</html>
